<template>
	<view :style="{ height: pageHeight, overflow: 'hidden' }">
		<search @search="disableScroll" />
		<!-- 焦点图 -->
		<swiper autoplay class="banner" indicator-dots indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#fff">
			<swiper-item v-for="item in swiperList" :key="item.goods_id">
				<navigator :url="`/subpkg/pages/goods/index?id=${item.goods_id}`">
					<image :src="item.image_src"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 导航条 -->
		<view class="navs">
			<navigator 
			v-for="item in categoryList" 
			:key="item.id" 
			:open-type="item.open_type || 'navigate'" 
			:url="item.open_type? `/pages/category/index`: `/subpkg/pages/list/index?query=${item.name}`">
				<image :src="item.image_src"></image>
			</navigator>
		</view>
		<!-- 楼层 -->
		<view class="floors">
			<view class="floor" v-for="item in floorsList" :key="item.floor_title.name">
				<view class="title">
					<image :src="item.floor_title.image_src"></image>
				</view>
				<view class="items">
					<navigator 
					v-for="product in item.product_list"
					:key="product.name"
					:url="`/subpkg/pages/list/index?query=${product.name}`">
						<image :src="product.image_src"></image>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 回到顶部 -->
		<view class="goTop icon-top" @click="goTop"></view>
	</view>
</template>

<script>
	import search from '@/components/search';
	import {getSwiperList,getCategoryList,getFloorsList} from '../../api/index.js'
	export default {
		components: {
			search
		},
		data() {
			return {
				pageHeight: 'auto',
				// 轮播图数据
				swiperList:[],
				// 分类数据
				categoryList:[],
				// 楼层数据
				floorsList:[]
			};
		},
		onLoad() {
			this.getSwiperList();
			this.getCategoryList()
			this.getFloorsList()
		},
		// 下拉刷新
		async onPullDownRefresh(){
			// 异步串行
			// Promise.all() 异步并行
			// await Promise.all([this.getSwiperList(),this.getCategoryList(),this.getFloorsList()])
			await this.getSwiperList()
			await this.getCategoryList()
			await this.getFloorsList()
			uni.stopPullDownRefresh()
		},
		methods: {
			// 轮播图请求数据
			async getSwiperList(){
				const {data} = await getSwiperList()
				// console.log(data)
				if(data.meta.status!==200){
					return uni.showToast({
						title:'数据请求失败',
						icon:'none'
					})
				}
				this.swiperList=data.message
			},
			// 分类模块请求数据
			async getCategoryList(){
				const {data} = await getCategoryList()
				// console.log(data)
				if(data.meta.status!==200){
					return uni.showToast({
						title:'数据请求失败',
						icon:'none'
					})
				}
				this.categoryList=data.message
			},
			// 楼层数据请求
			async getFloorsList(){
				const {data} = await getFloorsList()
				// console.log(res)
				if(data.meta.status!==200){
					return uni.showToast({
						title:'数据请求失败',
						icon:'none'
					})
				}
				this.floorsList=data.message
			},
			// 回到顶部
			goTop(){
				uni.pageScrollTo({
					scrollTop:0
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.banner {
		width: 100%;
		height: 340rpx;

		image {
			width: 100%;
			height: 340rpx;
		}
	}

	.navs {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 44rpx;

		image {
			width: 128rpx;
			height: 140rpx;
		}
	}

	.floor {
		.title {
			width: 750rpx;
			height: 60rpx;
			padding: 20rpx 0 0 8rpx;
			background-color: #f4f4f4;
		}

		.items {
			padding: 20rpx 16rpx;
			overflow: hidden;

			navigator {
				width: 193rpx;
				height: 188rpx;
				margin-left: 10rpx;
				margin-bottom: 10rpx;
				float: left;
			}

			navigator:first-child {
				width: 232rpx;
				height: 386rpx;
				margin-left: 0rpx;
			}

			navigator:nth-child(2),
			navigator:nth-child(5) {
				width: 273rpx;
			}
		}

		&:first-child {
			.items {
				navigator {
					width: 233rpx;
				}
			}
		}
	}

	.goTop {
		position: fixed;
		bottom: 30rpx;
		/* #ifdef H5 */
		bottom: 65px;
		/* #endif */
		right: 30rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		height: 100rpx;
		font-size: 48rpx;
		color: #666;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.8);
	}
</style>
